<template>
  <div class="w bigBox" style="">
    <div class="box">
      <div class="body">
        <div class="top">
          <span class="userList">用户列表</span>
          <a @click="add" class="addUsers">
            <a-icon type="plus-circle" /><span style="color: rgba(4, 133, 166, 1);">添加用户</span>
          </a>
          <!-- 添加用户弹出框 -->
          <a-modal
            v-model="addVisible"
            title="添加账号"
            @ok="addHandleOk"
            @cancel="addModalCancel"
            cancelText="取消"
            okText="确认"
            class="addCard"
            centered
          >
            <div>
              <a-form-model
                ref="addFormRef"
                :rules="addFormRules"
                :model="addForm"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
              >
                <a-form-model-item label="手机号 : " prop="phone">
                  <a-input class="changeInput" v-model="addForm.phone" />
                </a-form-model-item>
              </a-form-model>
            </div>
          </a-modal>
        </div>
        <div class="middle">
          <div class="list">
            <a-list :data-source="data" :pagination="pagination">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta :description="item.phone">
                  <a slot="title" :href="item.href">{{ item.realName }}</a>
                  <a-avatar
                    slot="avatar"
                    src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  />
                </a-list-item-meta>

                <!-- <a class="icon" slot="actions">
                  <i @click="edit(item.id)" class="iconfont icon-edit" /> -->
                  <!-- 修改事件弹出框  -->
                  <!-- <a-modal
                    width="420"
                    cancelText="取消"
                    okText="确认"
                    v-model="editVisible"
                    title="修改账号"
                    @cancel="editModalCancel"
                    @ok="editHandleOk"
                    class="editCard"
                    centered
                  >
                    <div>
                      <a-form-model
                        :model="editForm"
                        :rules="editFormRules"
                        ref="editFormRef"
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                      >
                        <a-form-model-item label="账号 : " prop="realName">
                          <a-input class="changeInput" v-model="editForm.realName" />
                        </a-form-model-item>
                      </a-form-model>
                    </div>
                  </a-modal>
                </a> -->
                <a class="icon" slot="actions">
                  <i @click="del(item.id)" class="iconfont icon-delete" />
                  <!-- 删除事件弹出框 -->
                  <a-modal
                    v-model="delVisible"
                    title="删除账号"
                    @ok="delHandleOk"
                    class="delCard"
                    cancelText="取消"
                    okText="确认"
                    centered
                  >
                    <span class="description">确定要删除当前用户嘛?</span>
                  </a-modal>
                </a>
              </a-list-item>
            </a-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getUserList,
  editUser,
  getMineUser,
  addUser,
  delUser
} from "../../api/api/get.js";
import iconfont from "../../assets/iconfont/iconfont.css";

export default {
  data() {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 19 },
      // editForm: {},
      addForm: {},
      delForm: {},
      data: [],
      delVisible: false,
      // editVisible: false,
      addVisible: false,
      addFormRules: {
        phone: [
          { required: true, message: "电话号码不能为空", trigger: "blur" }
        ]
      },
      editFormRules: {
        realName: [{ required: true, message: "账号不能为空", trigger: "blur" }]
      },
      pagination: {
        onChange: page => {
          console.log(page);
        },
        pageSize: 10
      }
    };
  },
  mounted: function() {
    this.getUser();
  },
  methods: {
    //cancel事件执行就将表单重置
    addModalCancel() {
      this.$refs.addFormRef.resetFields();
    },
    // editModalCancel() {
    //   this.$refs.editFormRef.resetFields();
    // },
    //修改图标事件,查询此行用户id
    // edit(rowRealName) {
    //   this.editForm.id = rowRealName;
    //   this.editVisible = true;
    // },
    //添加图标事件,查询当前用户id
    add() {
      this.addVisible = true;
    },

    //删除图标事件,查询此行用户id
    del(rowId) {
      this.delForm.id = rowId;
      this.delVisible = true;
    },
    //删除当前行的对应用户 删除弹出框确定按钮生效
    delHandleOk() {
      this.delVisible = false;
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].id == this.delForm.id) {
          this.data.splice(i, 1);
          delUser(this.data[i]).then(res => {
            return this.$notification.open({
              message: "删除成功"
            });
          });
        }
      }
      //重新加载列表
      // this.getUser();
    },
    //增加弹出框确定按钮事件
    addHandleOk() {
      // const res = addUser(this.addForm.phone);
      this.$refs.addFormRef.validate(valid => {
        if (!valid) return;
        this.data.unshift([]);
        this.data[0].phone = this.addForm.phone;
        addUser(this.data[0]).then(res => {
          this.addVisible = false;
          //重置函数
          this.$refs.addFormRef.resetFields();
          return this.$notification.open({
            message: "添加成功"
          });
        });
      });
    },
    //修改弹出框确定按钮事件
    // editHandleOk() {
    //   this.$refs.editFormRef.validate(valid => {
    //     if (!valid) return;
    //     for (let i = 0; i < this.data.length; i++) {
    //       if (this.data[i].id == this.editForm.id) {
    //         this.data[i].realName = this.editForm.realName;
    //         editUser(this.data[i]).then(res => {
    //           this.editVisible = false;
    //           this.$refs.editFormRef.resetFields();
    //           return this.$notification.open({
    //             message: "修改成功"
    //           });
    //         });
    //       }
    //     }
    //   });
    // },

    //获取用户数据
    getUser() {
      getUserList().then(res => {
        this.data = res.data;
      });
    }
  }
};
</script>

<style scoped>
.bigBox{
  height: 860PX;
  overflow: hidden
}
.box {
  position: relative;
  height: 100%;
  width: 100%;
  background: rgba(239, 244, 247, 1);
}
.box .body {
  height: 100%;
  width: 100%;
  background-color: white;
}
.body .top {
  overflow: hidden;
  height: 35px;
  font-size: 20px;
  font-family: Source Han Sans CN;
}

.top .userList {
  position: relative;
  float: left;
  font-weight: bold;
}
.top .addUsers {
  position: relative;
  float: right;
  color: rgba(4, 133, 166, 1);
}
.body .middle {
  padding: 12px 0px 0px 0px;
  height: 100%;
}

.list {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  padding: 8px 24px;
  height: 100%;
  background: rgba(239, 244, 247, 1);
}
.icon {
  position: relative;
  color: black;
}
.icon .edit {
  background-image: "../../static/image/edit.png";
}
.icon-delete{
  color:rgba(14,126,250,1);
}
.editCard {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(112, 112, 112, 1);
  opacity: 1;
  border-radius: 10px;
}
.changeInput {
  width: 400px;
}
</style>